<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>类型模板管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../plugins/select2/select2.css" />
    <link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
    <script src="../plugins/select2/select2.min.js" type="text/javascript"></script>

</head>

<body class="hold-transition skin-red sidebar-mini" >
  <!-- .box-body -->
                
	<div class="box-header with-border">
		<h3 class="box-title">商品类型模板管理</h3>
	</div>

	<div class="box-body">
		<!-- 数据表格 -->
		<div class="table-box">
			<!--工具栏-->
			<div class="pull-left">
				<div class="form-group form-inline">
					<div class="btn-group">
						<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
						<button type="button" onclick="deleteBatch()" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button>

						<button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
					</div>
				</div>
			</div>
			<div class="box-tools pull-right">
				<div class="has-feedback">
					分类模板名称：<input id="name" >
					<button class="btn btn-default" onclick="getData()">查询</button>
				</div>
			</div>
			<!--工具栏/-->

			  <!--数据列表-->
			  <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
				  <thead>
					  <tr>
						  <th class="" style="padding-right:0px">
							  <input id="selall" type="checkbox" class="icheckbox_square-blue">
						  </th>
						  <th class="sorting_asc">模板ID</th>
						  <th class="sorting">分类模板名称</th>
						  <th class="sorting">关联品牌</th>
						  <th class="sorting">关联规格</th>
						  <th class="sorting">扩展属性</th>
						  <th class="text-center">操作</th>
					  </tr>
				  </thead>
				  <tbody th:id="template">
					<!--ajax动态拼接模板信息-->
				  </tbody>
			  </table>
			<div th:replace="common/common :: foot"></div>
			  <!--数据列表/-->
		</div>
		<!-- 数据表格 /-->
	 </div>
	<!-- /.box-body -->

                                
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">商品类型模板编辑</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped"  width="800px">
		      	<tr>
		      		<td>商品类型</td>
		      		<td><input  class="form-control" id="templateName" placeholder="商品类型">  </td>
		      	</tr>			   
		      	<tr>
		      		<td>关联品牌</td>
		      		<td>
						<select id="brand" name="brand" multiple style="width: 100%">
							<option th:each="brand : ${brands}" th:value="${brand.id}">[[${brand.name}]]</option>
						</select>
		      		</td>
		      	</tr>
		      	<tr>
		      		<td>关联规格</td>
		      		<td>
						<select id="spec" name="spec" multiple style="width: 100%">
							<option th:each="spec : ${specs}" th:value="${spec.id}">[[${spec.specName}]]</option>
						</select>
		      		</td>
		      	</tr>
		      	<tr>
		      		<td>扩展属性</td>
		      		<td>
		      			<div class="btn-group">
                             <button type="button" onclick="addTr()" class="btn btn-default" title="新增扩展属性"><i class="fa fa-file-o"></i> 新增扩展属性</button>
                        </div>
						<table class="table table-bordered table-striped"  width="800px" id="templateAdd">
							<thead>
								<tr>
								    <td><input type="checkbox" class="icheckbox_square-blue"></td>
									<td>属性名称</td>									
									<td>操作</td>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td><input type="checkbox" class="icheckbox_square-blue" ></td>
									<td><input class="form-control" name="customAttributeItems" placeholder="属性名称" ></td>
									<td><button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button></td>
								</tr>
								<tr>
									<td><input type="checkbox" class="icheckbox_square-blue" ></td>
									<td><input class="form-control" name="customAttributeItems" placeholder="属性名称" ></td>
									<td><button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button></td>
								</tr>
							</tbody>
						</table>
		      		</td>
		      	</tr>
			 </table>
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success" onclick="save()" data-dismiss="modal" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>


  <!-- 修改窗口 -->
  <div class="modal fade" id="aditModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog" >
		  <div class="modal-content">
			  <div class="modal-header">
				  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				  <h3 id="myModalLabel2">商品类型模板编辑</h3>
			  </div>
			  <div class="modal-body">
				  <input  type="hidden" id="id">
				  <table class="table table-bordered table-striped"  width="800px">
					  <tr>
						  <td>商品类型</td>
						  <td><input  class="form-control" id="templateName2" placeholder="商品类型">  </td>
					  </tr>
					  <tr>
						  <td>关联品牌</td>
						  <td>
							  <select id="brand2" name="brand" multiple style="width: 100%">
								  <option th:each="brand : ${brands}" th:value="${brand.id}">[[${brand.name}]]</option>
							  </select>
						  </td>
					  </tr>
					  <tr>
						  <td>关联规格</td>
						  <td>
							  <select id="spec2" name="spec" multiple style="width: 100%">
								  <option th:each="spec : ${specs}" th:value="${spec.id}">[[${spec.specName}]]</option>
							  </select>
						  </td>
					  </tr>
					  <tr>
						  <td>扩展属性</td>
						  <td>
							  <div class="btn-group">
								  <button type="button" onclick="addTr2()" class="btn btn-default" title="新增扩展属性"><i class="fa fa-file-o"></i> 新增扩展属性</button>
							  </div>
							  <table class="table table-bordered table-striped"  width="800px" id="templateAdd2">
								  <thead>
									  <tr>
										  <td><input type="checkbox" class="icheckbox_square-blue"></td>
										  <td>属性名称</td>
										  <td>操作</td>
									  </tr>
								  </thead>
								  <tbody>

								  </tbody>
							  </table>
						  </td>
					  </tr>
				  </table>
			  </div>
			  <div class="modal-footer">
				  <button class="btn btn-success" onclick="update()" data-dismiss="modal" aria-hidden="true">修改</button>
				  <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			  </div>
		  </div>
	  </div>
  </div>

 <!-- 修改-->
  <script>
	  //增加规格选项的标签
	  function addTr2() {
		  $("#templateAdd2").append('<tr><td><input type="checkbox" class="icheckbox_square-blue" ></td><td><input class="form-control" name="customAttributeItems" placeholder="属性名称" ></td><td><button type="button" onclick="deleteTr2(this)" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button></td></tr>');
	  }
	  //删除当前的tr
	  function deleteTr2(obj) {
		  var parent = obj.parentNode.parentNode;
		  parent.parentNode.removeChild(parent);
	  }
	  //页面加载事件
	  $(function () {
		  $("#brand2").select2();
		  $("#spec2").select2();
	  })
	  //根据id调取后台数据进行修改回显
	  function updateInfo(id) {
		  $.ajax({
			  url: "/templateController/updateInfo",
			  dataType: "json",
			  data:{id:id},
			  type: "post",
			  success: function (result) {
				  console.log(result);
				  if (result.code == 200) {
					  var templater = result.data;
					  $("#id").val(templater.id);
					  $("#templateName2").val(templater.name);
					  //品牌回显
					  var brandIds = JSON.parse(templater.brandIds);
					  var brand = [];
					  $(brandIds).each(function (i,e) {
						  brand.push(e.id)
					  })
					  $("#brand2").val(brand).trigger("change");
					  //规格回显
					  var specIds = JSON.parse(templater.specIds);
					  var spec = [];
					  $(specIds).each(function (i,e) {
						  spec.push(e.id)
					  })
					  $("#spec2").val(spec).trigger("change");
					  //扩展属性
					  var customAttribute = JSON.parse(templater.customAttributeItems);
					  var info = '';
					  $(customAttribute).each(function (i, e) {
						  info += '<tr><td><input type="checkbox" class="icheckbox_square-blue" ></td><td><input class="form-control" value="'+e.text+'" name="customAttributeItems" placeholder="属性名称" ></td><td><button type="button" onclick="deleteTr2(this)" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button></td></tr>>';
					  })
					  $("#templateAdd2").html(info);
					  console.log(table);
				  } else {
					  alert(result.message)
				  }
			  },
			  error: function () {
				  toastr.error("系统错误，请联系管理员");
			  }
		  })
	  }

	  //修改
	  function update(){
		  //模板id
		  var id = $("#id").val();
		  //商品类型
		  var name = $("#templateName2").val();

		  //关联品牌
		  var brandData = $("#brand2").select2("data");
		  //定义js数组，js中不分数组和集合
		  var brandList = [];
		  //闭包
		  $(brandData).each(function (i,e) {
			  var brand = {id:e.id,text:e.text};
			  brandList.push(brand);
		  })
		  //将数组对象转成json格式字符串
		  var brandListJson = JSON.stringify(brandList);

		  //关联规格
		  var specData = $("#spec2").select2("data");
		  //定义js数组，js中不分数组和集合
		  var specList = [];
		  //闭包
		  $(specData).each(function (i,e) {
			  var spec = {id:e.id,text:e.text};
			  specList.push(spec);
		  })
		  //将数组对象转成json格式字符串
		  var specListJson = JSON.stringify(specList);

		  //组装扩展属性数据
		  var customAttributeItemsList = [];
		  var trList = $("#templateAdd2").find("tr");

		  for (var i = 0;i < trList.length;i++){
			  var tds = $(trList[i]).find("td");
			  var value = $(tds[1]).find("input").val();
			  var customAttributeItem = {text:value};
			  customAttributeItemsList.push(customAttributeItem)
		  }
		  var customAttributeItemsListJson = JSON.stringify(customAttributeItemsList);

		  $.ajax({
			  url:"/templateController/update",
			  type:"post",
			  data:{id:id,name:name,brandIds:brandListJson,specIds:specListJson,customAttributeItems:customAttributeItemsListJson},
			  dataType:"json",
			  async:false,
			  success:function(result){
				  if (result.code == 200) {
					  alert(result.message);
					  window.location.reload();
				  }
			  },
			  error:function(result){
				  alert(result.message);
			  }
		  })
	  }
  </script>

	<!--模板增加操作-->
    <script>
		//增加规格选项的标签
		function addTr() {
			$("#templateAdd").append('<tr><td><input type="checkbox" class="icheckbox_square-blue" ></td><td><input class="form-control" name="customAttributeItems" placeholder="属性名称" ></td><td><button type="button" onclick="deleteTr(this)" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button></td></tr>');
		}
		//删除当前的tr
		function deleteTr(obj) {
			var parent = obj.parentNode.parentNode;
			parent.parentNode.removeChild(parent);
		}
		//页面加载事件
		$(function () {
			$("#brand").select2();
			$("#spec").select2();
		})

		//select2的取值方式
		function save() {
			//商品类型
			var name = $("#templateName").val();

			//关联品牌
			var brandData = $("#brand").select2("data");
			//定义js数组，js中不分数组和集合
			var brandList = [];
			//闭包
			$(brandData).each(function (i,e) {
				var brand = {id:e.id,text:e.text};
				brandList.push(brand);
			})
			//将数组对象转成json格式字符串
			var brandListJson = JSON.stringify(brandList);

			//关联规格
			var specData = $("#spec").select2("data");
			//定义js数组，js中不分数组和集合
			var specList = [];
			//闭包
			$(specData).each(function (i,e) {
				var spec = {id:e.id,text:e.text};
				specList.push(spec);
			})
			//将数组对象转成json格式字符串
			var specListJson = JSON.stringify(specList);

			//组装扩展属性数据
			var customAttributeItemsList = [];
			var trList = $("#templateAdd").find("tr");

			for (var i = 1;i < trList.length;i++){
				var tds = $(trList[i]).find("td");
				var value = $(tds[1]).find("input").val();
				var customAttributeItem = {text:value};
				customAttributeItemsList.push(customAttributeItem)
			}
			var customAttributeItemsListJson = JSON.stringify(customAttributeItemsList);
			console.log(customAttributeItemsListJson)

			$.ajax({
				url:"/templateController/insertTemplate",
				type:"post",
				data:{name:name,brandIds:brandListJson,specIds:specListJson,customAttributeItems:customAttributeItemsListJson},
				dataType:"json",
				async:false,
				success:function(result){
					if (result.code == 200) {
						alert(result.message);
						window.location.reload();
					}
				},
				error:function(result){
					alert(result.message);
				}
			})
		}
	</script>

	<script>
		$(function () {
			getData();
		})
		//展示页面拼接
		function getData(){

			$.ajax({
				url:"/templateController/getTemplate",
				type:"get",
				//data : $("#OneForm").serialize(),
				data:{name:$("#name").val(),pageNumber:$("#pageNumber").val(),pageSize:$("#pageSize").val()},
				dataType:"json",
				async:false,
				success:function(page){
					var result=page.data.result;
					var info = "";
					$(result).each(function (i,e) {

						//分解specIds
						var specIds =JSON.parse(e.specIds);
						var specId = "";
						$(specIds).each(function (i,e) {
							specId += e.text + ",";
						})
						specId = specId.substring(0,specId.length-1);
						//分解brandIds
						var brandIds =JSON.parse(e.brandIds);
						var brandId = "";
						$(brandIds).each(function (i,e) {
							brandId += e.text + ",";
						})
						brandId = brandId.substring(0,brandId.length-1);
						//分解customAttributeItems
						var customAttributeItems =JSON.parse(e.customAttributeItems);
						var customAttributeItem = "";
						$(customAttributeItems).each(function (i,e) {
							customAttributeItem += e.text + ",";
						})
						customAttributeItem = customAttributeItem.substring(0,customAttributeItem.length-1);

						info+= '<tr>';
						info+= '<td><input  type="checkbox" value="'+e["id"]+'"></td>';
						info+= '<td>'+e['id']+'</td>';
						info+= '<td>'+e['name']+'</td>';
						info+= '<td>'+brandId+'</td>';
						info+= '<td>'+specId+'</td>';
						info+= '<td>'+customAttributeItem+'</td>';
						info+= '<td class="text-center">';
						info+= '<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#aditModal2" onclick="updateInfo('+e["id"]+')"  >修改</button>';
						info+= '</td>';
						info+= '</tr>';
					})

					$("#template").html(info);
					pageInstall(page.data);
				},
				error:function(page){
					alert(page.message);
				}
			})
		}
	</script>
  <!--删除操作-->
	<script>
		//批量删除
		function deleteBatch() {
			var ids = [];
			var boxs = $("[type=checkbox]:checked");
			for (var i = 0; i < boxs.length; i++) {
				ids.push(boxs[i].value);
			}
			alert(ids);
			if(ids.length <= 0){
				alert("请选择需要删除的数据");
				return;
			}
			if (confirm("是否确认删除?")){
				$.ajax({
					url:"/templateController/deleteBatch",
					type:"post",
					data:{ids:ids},
					dataType:"json",
					async:true,
					success:function (result) {
						if (result.code == 200){
							alert(result.message);
							window.location.reload();
						} else {
							toastr.error("删除失败");
						}
					},
					error:function(result){
						alert(result.message);
					}
				})
			}
		}
	</script>
</body>

</html>